<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Induction Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style setup ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = "20px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper function for zigzag resistors ---
        function drawZigzag(x1, y1, x2, y2, zigs, height) {
            const dx = x2 - x1;
            const dy = y2 - y1;
            const distance = Math.sqrt(dx * dx + dy * dy);
            const angle = Math.atan2(dy, dx);
            const segment = distance / zigs;

            ctx.save();
            ctx.translate(x1, y1);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            for (let i = 0; i < zigs; i++) {
                const sign = (i % 2 === 0) ? 1 : -1;
                ctx.lineTo((i + 0.5) * segment, sign * height);
            }
            ctx.lineTo(distance, 0);
            ctx.stroke();
            ctx.restore();
        }

        // --- Draw Coil 1 ---
        const x1 = 100, y1 = 80, w1 = 200, h1 = 40;
        ctx.strokeRect(x1, y1, w1, h1);
        ctx.fillText("1", x1 + w1 / 2, y1 - 25);
        
        // --- Draw Windings for Coil 1 ---
        const turns1 = 4;
        const turnWidth1 = w1 / turns1;
        ctx.beginPath();
        for (let i = 0; i < turns1; i++) {
            const currentX = x1 + i * turnWidth1;
            ctx.arc(currentX + turnWidth1 / 2, y1, turnWidth1 / 2, Math.PI, 0);
            ctx.lineTo(currentX, y1 + h1);
            ctx.arc(currentX, y1 + h1, turnWidth1/2, 0, Math.PI);
        }
        ctx.stroke();
        const lead1_in = x1;
        const lead1_out = x1 + w1;

        // --- Draw Circuit 1 ---
        // Left side (Resistor)
        ctx.beginPath();
        ctx.moveTo(lead1_in, y1 + h1);
        ctx.lineTo(lead1_in, 250);
        ctx.stroke();
        
        // Variable Resistor R
        drawZigzag(lead1_in - 10, 250, lead1_in + 10, 300, 5, 10);
        ctx.beginPath();
        ctx.moveTo(lead1_in - 20, 295);
        ctx.lineTo(lead1_in + 20, 255);
        ctx.lineTo(lead1_in + 12, 247);
        ctx.moveTo(lead1_in + 20, 255);
        ctx.lineTo(lead1_in + 28, 263);
        ctx.stroke();
        ctx.fillText("R", lead1_in + 35, 275);
        
        ctx.beginPath();
        ctx.moveTo(lead1_in, 300);
        ctx.lineTo(lead1_in, 330);
        ctx.stroke();
        
        // Bottom wire
        ctx.beginPath();
        ctx.moveTo(lead1_in, 330);
        ctx.lineTo(lead1_out, 330);
        ctx.stroke();

        // Right side (Battery and Switch)
        ctx.beginPath();
        ctx.moveTo(lead1_out, y1 + h1);
        ctx.lineTo(lead1_out, 330);
        ctx.stroke();
        
        // Battery V
        const battX = 180;
        ctx.beginPath();
        ctx.moveTo(battX, 318);
        ctx.lineTo(battX, 342);
        ctx.moveTo(battX + 15, 324);
        ctx.lineTo(battX + 15, 336);
        ctx.stroke();
        ctx.fillText("V", battX + 7, 355);
        // Polarity markers from diagram are very faint, but can be added
        // ctx.fillText("+", battX-10, 330);
        // ctx.fillText("-", battX+25, 330);


        // Switch S
        const switchX = 240;
        ctx.beginPath();
        ctx.arc(switchX, 330, 3, 0, 2*Math.PI);
        ctx.arc(switchX + 30, 330, 3, 0, 2*Math.PI);
        ctx.moveTo(switchX, 330);
        ctx.lineTo(switchX + 25, 315);
        ctx.stroke();
        ctx.fillText("S", switchX + 15, 355);

        // --- Draw Coil 2 ---
        const x2 = 400, y2 = 80, w2 = 150, h2 = 40;
        ctx.strokeRect(x2, y2, w2, h2);
        ctx.fillText("2", x2 + w2 / 2, y2 - 25);
        
        // --- Draw Windings for Coil 2 ---
        const turns2 = 3;
        const turnWidth2 = w2 / turns2;
        ctx.beginPath();
        for (let i = 0; i < turns2; i++) {
            const currentX = x2 + i * turnWidth2;
            ctx.arc(currentX + turnWidth2 / 2, y2, turnWidth2 / 2, Math.PI, 0);
            ctx.lineTo(currentX, y2 + h2);
            ctx.arc(currentX, y2 + h2, turnWidth2/2, 0, Math.PI);
        }
        ctx.stroke();
        const lead2_A = x2;
        const lead2_B = x2 + w2;
        
        // --- Draw Circuit 2 ---
        ctx.beginPath();
        ctx.moveTo(lead2_A, y2 + h2);
        ctx.lineTo(lead2_A, 330);
        ctx.moveTo(lead2_B, y2 + h2);
        ctx.lineTo(lead2_B, 330);
        ctx.stroke();
        
        // Resistor r
        drawZigzag(lead2_A, 330, lead2_B, 330, 7, 10);
        ctx.fillText("r", (lead2_A + lead2_B) / 2, 355);
        
        // Labels A and B
        ctx.fillText("A", lead2_A, 355);
        ctx.fillText("B", lead2_B, 355);

        // --- Draw Figure Caption ---
        ctx.fillText("Fig. 2.39", 350, 420);

    </script>
</body>
</html>